<template>

    <div class="row mt-2">

        <!-- 选择每页显示的总数 -->
        <div class="col form-group">
            <select class="form-control" v-on:change="changePageSize">
                <option value="4">4 per page</option>
                <option value="8">8 per page</option>
                <option value="12">12 per page</option>
            </select>
        </div>

        <!-- 选择第几页   -->
        <div class="text-right col">
            <div class="btn-group mx-2">
                <button v-for="i in pageNumbers " v-bind:key="i"
                        class="btn btn-secpmdary"
                        v-bind:class="{ 'btn-primary': i === currentPage }"
                        v-on:click="setCurrentPage(i)"
                >
                    {{i}}
                </button>
            </div>
        </div>

    </div>
</template>

<script>
    import {mapGetters, mapMutations, mapState} from "vuex"

    export default {
        name: "PageControls",
        computed: {
            ...mapState(["currentPage"]),
            ...mapGetters(["pageCount"]),

            pageNumbers() {
                return [...Array(this.pageCount + 1).keys()].slice(1)
            }
        },
        methods: {
            ...mapMutations(["setCurrentPage", "setPageSize"]),
            changePageSize($event) {
                this.setPageSize(Number($event.target.value));
            }
        }
    }
</script>
